<template></template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  name: "parent-app",
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.load();
  },
  methods: {
    /** 初始加载 */
    load() {
      // 创建场景对象Scene
      let scene = new THREE.Scene();
      /** --------------------物体--------------------- */
      // 物体--三角面几何
      let geometry = {
        0: new THREE.Geometry(),
      };
      // 顶点位置
      let points = {
        0: new THREE.Vector3(0, 0, 0),
        1: new THREE.Vector3(0, 100, 0),
        2: new THREE.Vector3(50, 0, 0),
        3: new THREE.Vector3(0, 0, 100),
      };
      // 顶点坐标添加到几何对象中
      geometry[0].vertices.push(points[0], points[1], points[2], points[3]);

      // 构建三角面
      let faces = {
        f1: new THREE.Face3(0, 1, 2),
        f1: new THREE.Face3(0, 2, 3),
      };
      // 三角面的顶点法向量：一种是设置每个顶点位置的法向量，一种是设置三角形面的法向量
      let normalVector = {
        n1: new THREE.Vector3(0, 0, -1),
        n2: new THREE.Vector3(0, 0, -1),
        n3: new THREE.Vector3(0, 0, -1),
        n4: new THREE.Vector3(0, -1, 0),
      };
      // 设置每个顶点位置的法向量
      faces.f1.vertexNormaks.push(
        normalVector.n1,
        normalVector.n2,
        normalVector.n3
      );
      // 设置三角形面的法向量
      faces.f2.normal = normalVector.n3;

      geometry[0].faces.push(faces.f1, faces.f2);

      // 三角面的顶点颜色：一种设置三角面的三个顶点颜色，一种是设置三角面的颜色
      // 使用顶点颜色数据的时候，注意设置材质的属性vertexColors属性值为THREE.VertexColors。
      let color = {
        0: new THREE.Color(0xffff00),
        1: new THREE.Color(0xff00ff),
        2: new THREE.Color(0x00ffff),
      };
      // 设置三角面的三个顶点颜色
      faces.f1.vertexColors = [color[0],color[1],color[2]]
      // 设置三角面的颜色
      faces.f2.color = color[0]
      /** --------------------材质--------------------- */
      // 设置材质--漫反射
      let material = new THREE.MeshLambertMaterial({
        // color: 0xe4e4e4,
        vertexColors: THREE.VertexColors, //顶点颜色
        side: THREE.DoubleSide, //两面可见
      });
      /** --------------------实体模型--------------------- */
      // 设置网络模型对象，实体模型
      let mesh = new THREE.Mesh(geometry[0], material);
      // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
      let axisHelper = new THREE.AxisHelper(250);
      scene.add(axisHelper);
      /** --------------------场景--------------------- */
      // 网格模型添加到场景中
      scene.add(mesh);

      /** --------------------光源设置--------------------- */
      //点光源
      let pointLight = {
        p1: new THREE.PointLight(0xfff),
        p2: new THREE.PointLight(0xfff),
      };
      pointLight.p1.position.set(400, 200, 300); //点光源位置
      pointLight.p2.position.set(-400, -200, -300); //点光源位置
      scene.add(pointLight.p1); //点光源添加到场景中
      scene.add(pointLight.p2); //点光源添加到场景中

      //环境光
      let ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      /** --------------------相机设置--------------------- */
      let width = window.innerWidth; //窗口宽度
      let height = window.innerHeight; //窗口高度
      let k = width / height; //窗口宽高比
      let s = 300; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(250, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

      /** --------------------渲染器对象--------------------- */
      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

      function render() {
        // 执行渲染操作   指定场景、相机作为参数
        renderer.render(scene, camera);
      }
      render();

      /** --------------------鼠标控件对象--------------------- */
      let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
      controls.addEventListener("change", render); //监听鼠标、键盘事件
    },
  },
};
</script>

